<template>
  <div>
    <div>
<el-select v-model="newShowFields" :placeholder="$t('public.pleasePick')" size="mini">
        <el-option
          v-for="item in newNotShowFields"
          :key="item.id"
          :disabled="item.status"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="dialog-footer">
      <el-button @click.stop="cannelDial" class='primary_btn'>{{$t('public.cancel')}}</el-button>
      <el-button type="primary" @click="saveShowCustField" class='primary_btn'>{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'setShowCustomField',
    data () {
      return {
        newShowFields: '',
        newNotShowFields: []
      }
    },
    props: {
    },
    watch: {
    },
    computed: {
    },
    methods: {
      saveShowCustField () {
        let data = {
          id: this._id,
          displayFields: this.newShowFields
        }
        this.$store.dispatch('editDisplayFields', data).then(resp => {
          if (resp.success) {
            this.$message.success(this.$t('configLazyLoad.customerConfig.configSuccess'))
            this.$emit('setCustomFieldSuc', this.newShowFields)
          }
        })
        this.$emit('setCustomFieldSuc', this.newShowFields)
      },
      cannelDial () {
        this.$emit('cannelDial')
      },
      open (showFields, notShowFields, _id) {
        this._id = _id
        this.newShowFields = deepClone(showFields)
        this.newNotShowFields = deepClone(notShowFields)
      }
    },
    components: {
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .dialog-footer
    text-align center
    margin 15px 0px 10px 0px
  .main-color
    color $c-prompt
  .reat-div
    border 1px solid $c-main
    display inline-block
    border-radius 4px
    padding 3px 8px
    min-width 40px
    text-align center
    margin-right 20px
    background-color #f1f5fa
    color $c-main
    position relative
    margin-top 15px
    cursor pointer
  .pin-btn
    position absolute
    color #fff
    top: -8px
    right: -8px
    border-radius: 50%
    width: 16px
    height: 15px
    line-height: 16px
    cursor pointer
  .pink
    background-color $c-pink
  .blue
    background-color $c-main
  .line
    margin 20px 0px
    border-top 1px dashed #ccc
</style>
